<template>
  <div>
    <input class="uploadFile" type="file" ref="fileInput" @change="uploadFile($event.target)" accept=".xlsx, .xls">
    <div class="upload_pictures">
      <div class="upload_btn" @click="uploadFiless">
        <div class="upload_txt">  <i class="el-icon-upload"></i> 上传文件导入试题</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    maxFileSize: {
      type: Number,
      default: 5 // 默认最大文件大小为5MB
    }
  },
  watch: {

  },
  created() {

  },
  data(){
    return{
      fileLists:[]
    }
  },
  methods: {
    uploadFiless(){
      const fileInput = this.$refs.fileInput
      fileInput.click()
    },
    uploadFile(event) {
      const file = this.$refs.fileInput.files[0];
      if (!file) {
        return;
      }
      const fileSize = file.size / 1024 / 1024; // 转换为MB
      if (fileSize > this.maxFileSize) {
        this.$message.warning(`文件大小不能超过${this.maxFileSize}MB`);
        return;
      }
      this.uploadFiles(event,file)
      // 进行上传操作
    },
    async uploadFiles(event,file){
      let formData = new FormData();
      formData.append("file", file);
      this.$emit('uploadFiles',formData)
      //重置input
      event.value=''
    }
  }
};
</script>
<style>
.uploadFile{
  display: none;
}
.upload_pictures{
  width: 100%;
  display: flex;
  justify-content: center;
}
.upload_btn{
  width: 80%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  cursor: pointer;
  border: 1px dashed rgba(0,0,0,0.65);
  border-radius: 8px;
}
.upload_txt{
  font-size: 22px;
  font-weight: 400;
  color: rgba(0,0,0,0.65);
  user-select: none;
  display: flex;
  align-items: center;
}
</style>
